<template>
  <div class="login-container">
    <div class="flex mb-50px">
      <img src="@/assets/logo.svg" class="w-80px h-80px mr-10px" alt="" />
      <div>
        <h1 class="text-40px text-[#03B4F5]">惠和安教智慧大屏</h1>
        <h2 class="text-16px text-[#0C81BE]">Business Data Display Visualization System</h2>
      </div>
    </div>

    <div class="form-container w-380px flex flex-col justify-center relative">
      <img src="@/assets/login_border_top.png" class="w-full absolute top--10px" alt="" />
      <div class="gradient-border">
        <h3 class="text-20px text-[#03B4F5]">用户登录 USER LOGIN</h3>
        <a-form ref="loginRef" :model="loginForm" :rules="loginRules" auto-label-width class="w-full">
          <a-form-item field="username" :label-col-style="{ paddingRight: '0px' }" hide-asterisk>
            <a-input v-model="loginForm.username" size="large" placeholder="请输入用户名" @keyup.enter="handleLogin">
              <template #prefix>
                <icon-user />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item field="password" :label-col-style="{ paddingRight: '0px' }" hide-asterisk>
            <a-input-password
              v-model="loginForm.password"
              size="large"
              placeholder="请输入密码"
              @keyup.enter="handleLogin">
              <template #prefix>
                <icon-lock />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item field="code"  :label-col-style="{ paddingRight: '0px' }" hide-asterisk>
            <a-input
              v-model="loginForm.code"
              size="large"
              placeholder="验证码"
              style="width: 66%;"
              @keyup.enter="handleLogin">
              <template #prefix>
                <icon-safe />
              </template>
            </a-input>
            <div class="w-30%">
              <img :src="codeUrl" @click="getCode" class="h-36px ml-12px" />
            </div>
          </a-form-item>
          <a-button :loading="loading" size="large" type="primary" style="width: 100%;background-color: rgb(var(--primary-5));" @click="handleLogin" >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </a-button>
        </a-form>
      </div>
      <img src="@/assets/login_border_bottom.png" class="w-full absolute bottom--10px" alt="" />
    </div>
  </div>
  <loginOrgSelect
      v-model:open="open"
      :tempToken="tempToken"
      @intoSystem="intoSystem"
    ></loginOrgSelect>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getCodeImg } from '@/api/login'
import useUserStore from '@/store/modules/user'
import loginOrgSelect from '@/components/loginOrgSelect'

const userStore = useUserStore()
const loginRef = ref()
const loginForm = ref({
  username: '',
  password: '',
  code: '',
  uuid: ''
})
const open = ref(false)
const tempToken = ref('')

const loginRules = {
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
  code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
}

const codeUrl = ref('')
const loading = ref(false)

const router = useRouter()

function getCode() {
  getCodeImg().then((res) => {
    codeUrl.value = 'data:image/gif;base64,' + res.img
    loginForm.value.uuid = res.uuid
  })
}

// const handleLogin = async () => {
//   loginRef.value.validate((errors) => {
//     if (!errors) {
//       loading.value = true
//       login(username.value, password.value, captcha.value, uuid.value).then((res) => {
//         if (res?.tempToken) {
//             // 多机构拦截一下
//             open.value = true
//             tempToken.value = res.tempToken
//             return
//           }
//         setToken(res.token)
//         setUserInfo(res.userInfo)
//         router.push('/')
//       }).catch(error => {
//         console.error('登录失败:', error)
//         getCode() // 登录失败刷新验证码
//       }).finally(() => {
//         loading.value = false
//       })
//     }
//   })
//   try {
//   } catch (error) {
//     console.error('登录失败:', error)
//     refreshCaptcha() // 登录失败刷新验证码
//   }
// }

// 登录
function handleLogin() {
  loginRef.value.validate((errors) => {
    if (!errors) {
      loading.value = true
      // 调用action的登录方法
      userStore
        .login(loginForm.value)
        .then((res) => {
          console.log('登录', res)
          if (res?.tempToken) {
            // 多机构拦截一下
            console.log('多机构拦截一下')
            open.value = true
            tempToken.value = res.tempToken
            return
          }
          loading.value = false
          router.push({ path: '/' })
        })
        .catch(() => {
          loading.value = false
          getCode()
        })
    }
  })
}
// 选择机构
function intoSystem(deptId) {
  userStore
    .selectOrganization({ tempToken: tempToken.value, deptId: deptId })
    .then(() => {
      loading.value = false
      router.push({ path: '/' })
    })
    .catch(() => {
      loading.value = false
      getCode()
    })
}
getCode()
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); */
  background: url('@/assets/login_bg.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
}
.form-container {
  background: rgba(31, 115, 197, 0.1);
  backdrop-filter: blur(1px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.gradient-border {
  width: 100%;
  padding: 30px;
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to bottom, #085594, #0470b0, #085594) 1;
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  padding: 30px 0 20px 0;
}

button {
  padding: 12px;
  color: white;
  border: none;
  border-radius: 4px;
  height: 40px;
  cursor: pointer;
  transition: background-color 0.3s;
}

</style>
